<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="(item,i) in list" :key="item.id">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<p class='mui-ellipsis'>{{item.title}}</p>
                            <div class="one-line"><span>发布时间 ：{{item.add_time | selectDate}}</span><span>点击：{{item.click}}次</span></div>
						</div>
					</a>
				</li>
			</ul>
    </div>
</template>

<script>
 export default {
   data () {
     return {
         list:[]
     }
   },
   methods:{
       getData:function(){
           this.$http.get('http://vue.studyit.io/api/getnewslist').then(result=>{
               this.list = result.body.message;
            //    console.log(this.list)
           })
       }
   },
   created(){
       this.getData()
   },
   components: {

   }
 }
</script>

<style lang="less" scoped>
.mui-table-view{
    p{
        font-size:16px;
    }
    .one-line{
        display:flex;
        justify-content: space-between;
        span{
            font-size: 10px;            
        }
    }
}
 
</style>